<template>
  <!-- <a-radio-group v-model:value="memberType" :disabled="!!memberList.length" @change="radioChange">
    <a-radio :value="0">指定人员</a-radio>
    <a-radio :value="1">指定角色</a-radio>
  </a-radio-group> -->
  <div v-if="slotDefault" class="set-menber-action" :class="{ 'cursor-pointer': !disabled }" @click.stop="visibleModel">
    <slot :data="memberList"></slot>
  </div>
  <a-button
    v-if="!isShow && !slotDefault && !disabled"
    type="primary"
    ghost
    size="small"
    :disabled="disabled"
    class="mr-2"
    @mousedown.stop="visibleModel"
  >
    <template #icon>
      <plus-outlined />
    </template>
    选择
  </a-button>
  <div v-if="showList" class="member-list">
    <draggable v-model="memberList" class="wrapper" item-key="value" animation="300" @change="dragChange">
      <template #item="{ element }">
        <a-tag color="blue" :closable="!isShow && allowRemove && !disabled" @close="handleClose(element)">
          {{ element.titleLabel || element.label }}
        </a-tag>
      </template>
    </draggable>
  </div>

  <!--选择用户/角色-->
  <!-- <a-modal v-model:visible="visible" :footer="null" :title="modalTitle"> -->
  <ChooseMember
    ref="ChooseMemberRef"
    :choosed-keys="props.memberList"
    :member-type="memberType"
    :user-type="props.userType"
    :role-type="props.roleType"
    :project-id="props.projectId"
    :gain-type="props.gainType"
    @close="submitMember"
  />
  <!-- </a-modal> -->
</template>
<script setup lang="ts" name="SetMember">
import { watch, ref, useSlots } from 'vue'
import ChooseMember from '@@/components/chooseMember/index.vue'
import draggable from 'vuedraggable'
import { PlusOutlined } from '@ant-design/icons-vue'
import { Form } from 'ant-design-vue'

const formItemContext = Form.useInjectFormItemContext()

const emits = defineEmits(['update:memberType', 'update:memberList', 'change'])
const props = defineProps({
  memberType: {
    type: Number,
    default: 0
  },
  memberList: {
    type: Array,
    default: () => []
  },
  isShow: {
    type: Boolean,
    default: false
  },
  allowRemove: {
    type: Boolean,
    default: true
  },
  userType: {
    type: String,
    default: 'org'
  },
  projectId: {
    type: String,
    default: ''
  },
  gainType: {
    type: String,
    default: ''
  },
  showList: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  roleType: {
    type: String,
    default: 'all' // all 项目角色和组织角色  org 组织角色  project 项目角色
  }
})
watch(
  () => props.memberList,
  (val) => {
    memberList.value = val
  }
)
watch(
  () => props.memberType,
  (val) => {
    memberType.value = val
  }
)

const slotDefault = !!useSlots().default
const memberType = ref(props.memberType)

const memberList = ref(props.memberList)
const visible = ref(false)
const ChooseMemberRef = ref()

const handleClose = (tag) => {
  const index = memberList.value.findIndex((el: any) => el.value === tag.value)
  memberList.value.splice(index, 1)
  emits('update:memberList', memberList.value)
  emits('change', memberList.value)
  formItemContext.onFieldChange()
}
const visibleModel = () => {
  if (!props.disabled) {
    // visible.value = true
    ChooseMemberRef.value.show()
  }
}
const submitMember = ({ type, data }) => {
  if (data) {
    memberList.value = data
    emits('update:memberList', memberList.value)
    emits('update:memberType', parseInt(type))
    emits('change', memberList.value)
    formItemContext.onFieldChange()
  }
  visible.value = false
}
const dragChange = () => {
  emits('update:memberList', memberList.value)
}
</script>
